<template>
  <div class="views_BOX">
    <!-- tab  start -->
    <div class="BOX_tabs F">
      <div
        class="BOX_tab_item FCC cursor"
        v-for="(item, index) in tabLists"
        :key="index"
        :class="{'BOX_tab_itemSel':tabIndex == index}"
        @click="tabClick(index)"
      >{{item.label}}</div>
    </div>
    <!-- tab  end -->

    <!-- search  start -->
    <div class="BOX_nav from_masrgin_box">
      <el-form :model="queryList" :inline="true">
        <el-form-item label="申诉时间：" class="form_search_box">
          <el-date-picker
            v-model="queryList.dates"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select class="w_108" @change="selectKeyChange" v-model="queryList.selectKey">
            <el-option
              v-for="item in selectKeyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label class="form_search_box">
          <el-input maxlength="50" class="w_250" v-model="queryList.search" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="form_search_but_box">
          <el-button class="baseBut bg_base" type="primary" @click="searchClick">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- search  end -->

    <!-- list  start -->
    <div class="BOX_main">
      <vue-scroll ref="safeguardOrderVs" :ops="$store.state.ops">
        <div class="BOX_main_table">
          <ul class="table_hd">
            <li class="table_item table_header">
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">售后商品</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">退款金额</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">买家</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">申诉时间</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">商家处理</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">平台介入</div>
              </div>
              <div class="table_item_box table_header_box">
                <div class="table_item FCC">操作</div>
              </div>
            </li>
          </ul>
          <ul class="table_main" v-show="list.length">
            <li class="table_item table_list" v-for="(order, index) in list" :key="index">
              <div class="table_list_nav">
                <div class="table_list_nav_lf">
                  <div class="table_list_nav_lf_item">退款编号：{{order.refundId}}</div>
                  <div class="table_list_nav_lf_item">订单号：{{order.orderId}}</div>
                  <div class="table_list_nav_lf_item">{{order.sellerId}}</div>
                </div>
                <div class="table_list_nav_lr cursor" @click="appealDetailClick(order)">申诉详情</div>
              </div>
              <div class="table_list_bd">
                <ul class="table_list_bd_ul">
                  <li class="table_item table_list_item">
                    <div class="table_item_box table_list_box">
                      <div class="table_item table_list_item_px"></div>
                      <div
                        class="table_list_box_shop FCC"
                        v-for="(item, itemIndex) in order.orderItemList"
                        :key="itemIndex"
                      >
                        <div class="table_list_box_shop_1">
                          <img :src="item.picPath | picPathFil" alt />
                        </div>
                        <div class="table_list_box_shop_2 FAIC">{{item.title}}</div>
                      </div>
                      <div class="table_item table_list_item_px"></div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FDJCC">
                        <div class="FCC color_bsae">{{order.payment}}</div>
                        <div class="FCC">{{order.payment}}</div>
                      </div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FDJCC">
                        <div class="FCC">{{order.receiver}}</div>
                        <div class="FCC">{{order.receiverMobile}}</div>
                      </div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FDJCC">
                        <div class="FCC">{{order.createTime | dateStringFil('ymd')}}</div>
                        <div class="FCC">{{order.createTime | dateStringFil('hfs')}}</div>
                      </div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FCC">{{order.status | statusFil}}</div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FCC">{{order.status | statusFil}}</div>
                    </div>
                    <div class="table_item_box table_list_box">
                      <div class="table_item FCC">
                        <el-button
                          class="baseBut bg_base w_80"
                          type="primary"
                          @click="itemClick(order)"
                        >{{order.status == 2 ? '处理' : '查看'}}</el-button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="emptyData_box FCC" v-show="list.length == 0">暂无数据</div>
        </div>
      </vue-scroll>
    </div>
    <!-- list  end -->

    <!-- page  start -->
    <div class="BOX_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="queryList.pageNo"
        :page-size="queryList.pageSize"
        layout="total, prev, pager, next"
        :total="queryList.total"
      ></el-pagination>
    </div>
    <!-- page  end -->
    <!--  平台处理 start -->
    <el-dialog title="平台处理" :visible.sync="isDisposeDialog" width="580px">
      <div class="disposeDialog_box">
        <div class="form_Dialog_box">
          <el-form :model="dialogFrom" :inline="true">
            <el-form-item label="买家姓名：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerNick}}</div>
            </el-form-item>
            <el-form-item label="退款金额：" class="form_dialog_item">
              <div class="color_bsae form_Dialog_text">{{dialogFrom.payment}}</div>
            </el-form-item>
            <el-form-item label="商家处理：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.sellerId}}</div>
            </el-form-item>
            <el-form-item label="商家备注：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.sellerId}}</div>
            </el-form-item>
            <el-form-item label="平台备注：" class="form_dialog_item">
              <el-input
                class="disposeDesc"
                type="textarea"
                placeholder="请输入"
                v-model="dialogFrom.desc"
                maxlength="100"
                minlength="1"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="butDialog_box FCC">
          <el-button class="baseBut bg_base mgr_10" type="primary" @click="disposeClick(1)">同意申诉</el-button>
          <el-button class="baseBut bg_gray mgl_10" type="primary" @click="disposeClick(2)">不同意申诉</el-button>
        </div>
      </div>
    </el-dialog>
    <!--  平台处理 end -->
    <!--  查看 start -->
    <el-dialog title="查看" :visible.sync="isDetailDialog" width="580px">
      <div class="disposeDialog_box">
        <div class="form_Dialog_box form_DialogText_box">
          <el-form :model="dialogFrom" :inline="true">
            <el-form-item label="买家姓名：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerNick}}</div>
            </el-form-item>
            <el-form-item label="申请时间：" class="form_dialog_item">
              <div class="color_bsae form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="买家会员名：" class="form_dialog_item">
              <div class="color_black form_Dialog_text_1">{{dialogFrom.buyerNick}}</div>
            </el-form-item>
            <el-form-item label="商品名称：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.title}}</div>
            </el-form-item>
            <el-form-item label="退款金额：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="退款原因：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="处理状态：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.status | statusFil}}</div>
            </el-form-item>
            <el-form-item label="商家备注：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="平台确认：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="平台备注：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!--  查看 end -->
    <!--  申诉 start -->
    <el-dialog title="查看" :visible.sync="isAppealDetailDialog" :width="detailWidth">
      <div class="disposeDialog_box">
        <div
          class="form_Dialog_box"
          :class="{'form_DialogText_box':dialogFrom.status != 3,'form_DialogTextLog_box':dialogFrom.status == 3}"
        >
          <el-form :model="dialogFrom" :inline="true">
            <el-form-item label="申请时间：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="商品名称：" class="form_dialog_item">
              <div class="color_black form_Dialog_text">{{dialogFrom.title}}</div>
            </el-form-item>
            <el-form-item label="退款金额：" class="form_dialog_item">
              <div class="color_bsae form_Dialog_text">{{dialogFrom.buyerMessage}}</div>
            </el-form-item>
            <el-form-item label="退款原因：" class="form_dialog_item">
              <div class="color_black form_Dialog_text AppealDetail_item">
                <div class="AppealDetail_item_text">{{dialogFrom.buyerMessage}}</div>
                <div class="AppealDetail_item_img">
                  <img src="/static/img/demo/10@3x.png" v-for="(item, index) in 5" :key="index" alt />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="logistics_box" v-show="dialogFrom.status == 3">
          <div class="logistics_box_info OFH">
            <div class="mgr_60">运单号：YT4496701967973</div>
            <div class="mgr_60">物流公司：圆通快递</div>
            <div>客服电话：95554</div>
          </div>
          <div class="logistics_box_title FAIC OFH">
            <div class="FZ_14 mgr_10">物流信息：</div>
            <div class="color_bsae">运输中</div>
          </div>
          <div class="logistics_box_list OFH">
            <ul class="BOX">
              <li class="logistics_item F" v-for="(item, index) in logisticsList" :key="index">
                <div class="logistics_item_1">
                  <div class="logistics_item_1Sel"></div>
                </div>
                <div class="logistics_item_2">{{item.date}}</div>
                <div class="logistics_item_3">{{item.week}}</div>
                <div class="logistics_item_4">{{item.time}}</div>
                <div class="logistics_item_5">{{item.desc}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--  申诉 end -->
  </div>
</template>
<script>
import { getRefundList } from "../../../../requestApi/order/safeguardOrder";

export default {
  components: {},
  data() {
    return {
      tabLists: [
        { label: "待处理", value: 1 },
        { label: "已处理", value: 2 }
      ],
      selectKeyList: [
        { value: "1", label: "订单编号" },
        { value: "2", label: "退款编号" },
        { value: "4", label: "买家名" },
        { value: "8", label: "店铺名" }
      ],
      tabIndex: 0,
      queryList: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        selectKey: "1",
        search: "",
        dates: [],
        grade: sessionStorage.getItem("grade"),
        orderId: "",
        refundId: "",
        buyName: "",
        nickName: "",
        safeguardingRights: "1", //
        safeguardingStartDate: "", // 维权开始时间
        safeguardingEndDate: "", // 维权结束时间
        platformDispose: "0" // 平台是否处理 0待处理 1已处理
      },
      list: [],
      isDisposeDialog: false,
      dialogFrom: {
        desc: "",
        status: 3
      },
      isDetailDialog: false,
      isAppealDetailDialog: false,
      detailWidth: "580px",
      logisticsList: [
        {
          date: "2020-05-06",
          week: "3",
          time: "15:35:00",
          desc: "河南转运中心已发出 下一站 西安转运中心"
        },
        {
          date: "2020-05-06",
          week: "3",
          time: "15:35:00",
          desc: "河南转运中心已发出 下一站 西安转运中心"
        },
        {
          date: "2020-05-06",
          week: "3",
          time: "15:35:00",
          desc: "河南转运中心已发出 下一站 西安转运中心"
        },
        {
          date: "2020-05-06",
          week: "3",
          time: "15:35:00",
          desc: "河南转运中心已发出 下一站 西安转运中心"
        }
      ]
    };
  },
  created: function() {},
  mounted() {
    let self = this;
    self.queryListFun();
  },
  computed: {},
  methods: {
    /* 申诉  start */
    appealDetailClick(item) {
      this.dialogFrom = {
        ...item
      };
      this.detailWidth = this.dialogFrom.status == 3 ? "780px" : "580px";
      this.isAppealDetailDialog = true;
    },
    /* 申诉  end */
    /* 查看、处理  start */
    itemClick(item) {
      let self = this;
      if (item.status == 1) {
        // 查看
        this.dialogFrom = {
          ...item
        };
        this.isDetailDialog = true;
      } else {
        // 处理
        this.dialogFrom = {
          ...item
        };
        this.isDisposeDialog = true;
      }
    },
    disposeClick(type) {},
    /* 查看、处理  end */
    /* tab  start */
    tabClick(index) {
      this.queryList = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        selectKey: "1",
        search: "",
        dates: [],
        grade: sessionStorage.getItem("grade"),
        orderId: "",
        refundId: "",
        buyName: "",
        nickName: "",
        safeguardingRights: "1", //
        safeguardingStartDate: "", // 维权开始时间
        safeguardingEndDate: "", // 维权结束时间
        platformDispose: "0" // 平台是否处理 0待处理 1已处理
      };
      this.tabIndex = index;
      this.queryList.platformDispose = `${index}`;
      this.queryListFun();
    },
    /* tab  end */
    /* list  start */
    resetClick() {
      this.queryList = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        selectKey: "1",
        search: "",
        dates: [],
        grade: sessionStorage.getItem("grade"),
        orderId: "",
        refundId: "",
        buyName: "",
        nickName: "",
        safeguardingRights: "1", //
        safeguardingStartDate: "", // 维权开始时间
        safeguardingEndDate: "", // 维权结束时间
        platformDispose: "0" // 平台是否处理 0待处理 1已处理
      };
      this.queryListFun();
    },
    selectKeyChange() {
      this.queryList.orderId = "";
      this.queryList.refundId = "";
      this.queryList.buyName = "";
      this.queryList.nickName = "";
      this.queryList.search = "";
    },
    searchClick() {
      this.queryList.pageNo = 1;
      if (this.queryList.nickName == 1) {
        this.queryList.orderId = this.queryList.search;
      } else if (this.queryList.nickName == 2) {
        this.queryList.refundId = this.queryList.search;
      } else if (this.queryList.nickName == 4) {
        this.queryList.buyName = this.queryList.search;
      } else if (this.queryList.nickName == 8) {
        this.queryList.nickName = this.queryList.search;
      }
      if (this.queryList.dates && this.queryList.dates.length) {
        this.queryList.safeguardingStartDate = this.queryList.dates[0];
        this.queryList.safeguardingEndDate = this.queryList.dates[1];
      }
      this.queryListFun();
    },
    // 分页
    handleCurrentChange(val) {
      this.queryList.pageNo = val;
      this.queryListFun();
    },
    async queryListFun() {
      let self = this;
      let params = {
        ...self.queryList
      };
      let res = await getRefundList(params);
      self.list = [];
      if (res.status == 200 && res.data) {
        let data = res.data;
        if (data.list && data.list.length) {
          self.queryList.total = Number(data.totalCount);
          self.list = data.list;
          self.$nextTick(() => {
            self.$refs["safeguardOrderVs"].scrollTo(
              {
                y: "0%"
              },
              300
            );
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "系统开小差！"
        });
      }
    }

    /* list  end */
  },
  filters: {},
  watch: {}
};
</script>
<style scoped>
/* 物流信息  start */
.logistics_box {
  width: 100%;
  border-top: 1px solid #ebeef3;
  margin-bottom: 40px;
}
.logistics_item_2 {
  width: 115px;
}
.logistics_item_3 {
  width: 30px;
}
.logistics_item_4 {
  width: 60px;
  margin-left: 20px;
  margin-right: 40px;
}
.logistics_item_5 {
  width: 395px;
}
.logistics_item_1 {
  width: 20px;
}
.logistics_item_1Sel {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d8d8d8;
  margin-top: 5px;
  position: relative;
}
.logistics_item:nth-child(1) .logistics_item_1Sel {
  background-color: #eb4426 !important;
}
.logistics_item:nth-child(1) .logistics_item_1,
.logistics_item:nth-child(1) .logistics_item_2,
.logistics_item:nth-child(1) .logistics_item_3,
.logistics_item:nth-child(1) .logistics_item_4,
.logistics_item:nth-child(1) .logistics_item_5 {
  color: #eb4426 !important;
}
.logistics_item::before {
  position: absolute;
  top: 20px;
  left: 4px;
  height: calc(100% - 22px);
  width: 1px;
  background-color: #d8d8d8;
  content: "";
}
.logistics_item:nth-last-child(1)::before {
  position: absolute;
  top: 20px;
  left: 4px;
  height: 22px;
  width: 0px !important;
  background-color: #d8d8d8;
  content: "";
}
.logistics_box_list {
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-top: 22px;
}
.logistics_item {
  width: 100%;
  min-height: 20px;
  position: relative;
  padding-bottom: 20px;
}
.logistics_box_title {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(45, 55, 62, 1);
  line-height: 22px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 20px;
}
.logistics_box_info {
  width: calc(100% - 40px);
  margin-left: 20px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(45, 55, 62, 1);
  line-height: 20px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
/* 物流信息  end */
/* 空数据  start */
.emptyData_box {
  width: 100%;
  height: 130px;
  font-size: 20px;
  color: #ccc;
}
/* 空数据  end */

/* 处理  start */
.AppealDetail_item {
  width: 450px;
}
.form_Dialog_text {
  width: 450px;
}
.form_Dialog_text_1 {
  width: 420px;
}
.AppealDetail_item_text {
  width: 100%;
  min-height: 32px;
  line-height: 32px;
}
.AppealDetail_item_img {
  width: 100%;
}
.AppealDetail_item_img img {
  width: 64px;
  height: 64px;
  margin-right: 20px;
}
.disposeDesc {
  width: 450px;
}
.form_dialog_item {
  width: 100% !important;
  margin-bottom: 4px !important;
}

.form_dialog_item .el-form-item__label {
  color: rgba(152, 159, 173, 1) !important;
}

.disposeDialog_box {
  width: 100%;
  overflow: hidden;
}
.form_Dialog_box {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 30px;
  overflow: hidden;
}
.form_DialogText_box {
  margin-bottom: 40px;
}
.form_DialogTextLog_box {
  margin-bottom: 20px;
}
.butDialog_box {
  height: 112px;
  width: calc(100%);
}
/* 处理  end */
/* list  start */
.BOX_main_table {
  margin-left: 20px;
  margin-right: 20px;
  width: calc(100% - 40px);
}
.table_item {
  width: 100%;
  height: 100%;
}
.table_item_box {
  display: table-cell;
  vertical-align: middle;
}
.table_hd {
  height: 48px;
  width: 100%;
  display: table;
}

.table_header {
  height: 48px;
  background: rgba(255, 239, 234, 1);
  border: 1px solid rgba(255, 215, 203, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(45, 55, 62, 1);
  display: table-row;
  vertical-align: middle;
}
.table_header_box {
  line-height: 48px;
  text-align: center;
  height: 48px;
}

.table_item_box:nth-child(1) {
  min-width: 420px;
}
.table_item_box:nth-child(2),
.table_item_box:nth-child(3),
.table_item_box:nth-child(4),
.table_item_box:nth-child(5),
.table_item_box:nth-child(6) {
  width: 110px;
}

.table_item_box:nth-child(7) {
  width: 120px !important;
}

.table_list_box_shop {
  display: flex;
  align-items: center;
  height: 95px;
}
.table_list_box_shop_2 {
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
  width: calc(100% - 140px);
  height: 80px;
  margin-left: 20px;
  overflow: hidden;
}
.table_list_box_shop_1 {
  width: 80px;
  height: 80px;
  background: rgba(216, 216, 216, 1);
  margin-left: 20px;
}
.table_list_box_shop_1 img {
  width: 100%;
  height: 100%;
}

.table_main {
  width: 100%;
}
.table_list {
  min-height: 146px;
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(238, 240, 245, 1);
}
.table_list_nav {
  height: 36px;
  background: rgba(245, 246, 250, 1);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table_list_nav_lf {
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
  display: flex;
  align-items: center;
}
.table_list_nav_lf_item {
  margin-left: 16px;
  margin-right: 24px;
}
.table_list_nav_lr {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 94, 41, 1);
  margin-right: 20px;
}
.table_list_bd {
  min-height: 95px;
  width: 100%;
}
.table_list_bd_ul {
  min-height: 95px;
  width: 100%;
  display: table;
}
.table_list_item {
  height: 95px;
  display: table-row;
  width: 100%;
  overflow: hidden;
}
.table_list_box {
  height: 80px;
}
.table_list_item_px {
  height: 8px;
}
/* list  end */
.BOX_main {
  height: calc(100% - 246px);
  overflow: hidden;
  background-color: #fff;
}

.BOX_page {
  width: 100%;
  height: 108px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.BOX_nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  overflow: hidden;
  margin-top: 10px;
  padding-left: 20px;
}
/* tabs  start */
.BOX_tabs {
  height: 60px;
  background-color: #fff;
  overflow: hidden;
}
.BOX_tab_item {
  width: 42px;
  font-size: 14px;
  height: 100%;
  font-weight: 400;
  color: rgba(42, 41, 40, 1);
  margin-right: 36px;
  margin-left: 20px;
}
.BOX_tab_itemSel {
  color: rgba(235, 68, 38, 1) !important;
}
/* tabs  end */
</style>
